@import "../var.scss";
.goodsDetail {
    
    .goodsImgs{height: 3.75rem;position: relative;
      .home-my{position: absolute;z-index: 2;top:.2rem;right: .1rem;font-size:0;text-align: center;line-height: .3rem;
        a{height: .32rem;width: .32rem;background: rgba(0,0,0,.5);border-radius: 50%;display: inline-block;margin-left:.15rem;color: #fff;}
        .icon{width:.2rem;height:.2rem;}
      }
      .self-tag{width: .4rem;height: .4rem;background: $red;color: #fff;position: absolute;text-align: center;font-size: .17rem;line-height: .2rem;right: 0;top: .8rem;padding: .05rem; z-index: 1;}
      // .salecar-icon{position: absolute;width: .6rem;height:.6rem;border-radius: 50%;background: linear-gradient(to bottom, #ff3e60, #fe5653,#ff6a4c);left: .2rem;top: .85rem;text-align: center;line-height: .6rem;color: #fff;font-size: .22rem;z-index: 1;font-style: italic;font-weight: 600}
      .salecar-icon{position: absolute;left: .2rem;top: .85rem;width: .6rem;height:.6rem;background: url('~assets/img/mall/salecarIcon.png') no-repeat;background-size: 100% 100%;z-index: 1}
    }
    .swiper-slide {
      .car-img{
        height:100%;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        box-shadow: 0px -30px 50px -30px #88888d inset;
        position: relative;
        @include box;
        @include flexAlign(flex-end);
      }
      img{width:100%;height:100%;display: block;}}
    .goods-info{margin-bottom:.1rem;
      .base{padding:.15rem .2rem .1rem;background: #fff;border-bottom: 1px solid rgba(237, 237, 237, 0.8);
        h1{font-size: .15rem;color:$black;margin-bottom:.1rem;@include flex}
        h2{font-size:$h3;color:$red;}
        ul{@include box;line-height:.14rem;margin:.1rem 0;
          li{border:1px solid $red;color:$red;padding:0 .04rem; border-radius: 3px;font-size: .12rem;}
        }
        .price{@include box;margin-top:.1rem;
          div:nth-of-type(1){color:$red;@include flex;
            span{font-size:$h3;border:1px solid $red;border-radius:3px;padding:0 .05rem;}
            del{color:$lightBlack;font-size:$h3;}
            .vip-img{height:.15rem;vertical-align: middle;margin-top: -.02rem;margin-right:.05rem;}
          }
          .jifen{vertical-align: middle;font-style:normal;font-size: .16rem;line-height:.2rem;}
          div:nth-of-type(2){@include flex(2);text-align:right;span{color:$red;}}
        }
      }
      
      .arrow-link{background: #fff;height:.44rem;line-height: .44rem;padding:0 .2rem;border-bottom:$border;overflow: hidden;zoom: 1;
        &.no-link{
          &::before { content: '';   border-left-color: #fff;}
          &::after { content: '';   border-left-color: #fff;}
        }
        h1{color:$black;display: inline-block;float:left;margin-right: .2rem;}
        >.lc-rate{float:left;color:$gray;margin-right:.1rem;max-width:2.3rem;@include txtOverflow;}
        &.seckill{background: linear-gradient(to right, #f02d8d, #f2315e);
          &::before { content: '';   border-left-color: #fff;}
          &::after { content: '';   border-left-color: #f2315e;}
          .title{font-size: .15rem;color: #fff;float: left;
            span{font-size: .12rem;margin-left: .08rem;}
          }
          .time{max-width: 100%;height: .44rem;line-height: .20rem;@include box;@include flexJustify;text-align: center;color: #fff;margin-right: .2rem;@include flexDir(column);float:right;
            p{font-size: .14rem;}
            div{font-size: 0;
              em{font-style: normal;font-size: .12rem;padding: 0 .02rem;font-weight: 600;}
              .num{display: inline-block;line-height: .17rem;font-size: .12rem;width: .17rem;height:.17rem;border:1px solid #fff;}
            }
          }
        }
      }

      .profit{background: #fef6f3;color:$gray;padding-right:.4rem;font-size:$h3;border:none;overflow: hidden;zoom:1;
        div{float:left;margin-right:.2rem;}
        div::before{content: '';display: inline-block;margin-right:.05rem;width:.1rem;height:.1rem;background: url('~assets/img/mall/icon_detail_mark.png') no-repeat center;background-size:100%;}
        .notice::before{content: '';background: url('~assets/img/integralMall/icon_detail_notice.png') no-repeat center;display: inline-block;margin-right:.05rem;width:.1rem;height:.1rem;background-size:100%;}
        .guide::before{content: '';background: url('~assets/img/integralMall/icon_detail_guide.png') no-repeat center;display: inline-block;margin-right:.05rem;width:.1rem;height:.1rem;background-size:100%;}
      }
      
      .benefit{background:#fff;padding:0 .2rem;line-height: .44rem;font-size:$h3;border-bottom:$border;display:block;
        span{border:1px solid $red;color:#fff;border-radius:3px;padding:1px 3px;margin-right:.05rem;background: $red;}
        p{display: inline-block;}
      }

    }

    .steps{margin:.1rem 0;background:#fff;
      h1{color:$black;border-bottom:$border;line-height: .44rem;padding:0 .2rem;}
      img{width:100%;padding:.2rem;box-sizing: border-box;}
    }

    .sku{background: #fff;padding-top:.9rem;position: relative;
      .goodsImg{width:1rem;height:1rem;position:absolute;top:-.2rem;left:.2rem;}
      .price{position: absolute;left:1.4rem;top:.25rem;color:$red;font-size: .15rem;}
      .tip{position: absolute;left:1.4rem;top:.55rem;color:$gray;font-size:$h3;}
      .page-content{height:3rem;padding:0 .2rem;box-sizing:border-box;padding-bottom:.2rem;
        input[type="tel"]:disabled{
          border: 1px solid rgba(237, 237, 237, 0.8) !important;
          color: #22222d !important;
        }
        h1{font-size:$h2;margin:.15rem 0;
          em{font-style: normal;color: $red;font-size: .12rem;margin-left: .05rem;}
        }
        span{display:inline-block;font-size:$h3;line-height:.3rem;margin:0 .1rem .1rem 0;border:1px solid hsla(0,0%,93%,.6);padding:0 .08rem;border-radius:4px;}
        span.on{border-color:$red;color:$red;}

        .amount{
          button{display: inline-block;width:.3rem;height:.25rem;border:$border;}
          input{display: inline-block;width:.3rem;height:.25rem;text-align: center;color:$black;border:$border;}
        }
        .ziti-box{
          height: .27rem;
          background: #f2f2f2;
          padding:  0 .1rem;
          font-size: 0;
          @include box;
          @include flexAlign;
          .icon{height: .17rem;height:.17rem;}
          em{font-style: normal;font-size: .12rem;margin-left: .08rem;}
          &::before{
            content: '';
            right: .1rem
          }
          &::after{
            content: '';
            right: .11rem
          }
        }

      }

      .next{@include box;height:.5rem;
          button{@include flex;color:#fff;height: 100%;
            &.yellow{background:#f29600;}
            &.orange{background:$red;}
            &.ok{background: $red;}
            &.dis{background:#c9c9c9;width:2.25rem;line-height: .45rem;color:#fff;text-align:center;}
          }
      }
      
    }

    .fourS,.carSku,.profitsDetail{background:#fff;padding-bottom:.2rem;
      h1{line-height: .5rem;text-align: center;border-bottom:$border;font-size:.16rem;color:$black;
        span{    float: left;font-size: .12rem; position: absolute;left: .2rem;}
        em{font-style: normal;color: $red}
      }
      .page-content{height:3rem;padding:0 .2rem;}
    }

    .profitsDetail{
      .page-content{
        li{margin-top: .2rem;}
        h2::before{content: '';display: inline-block;margin-right:.05rem;width:.1rem;height:.1rem;background: url('~assets/img/mall/icon_detail_mark.png') no-repeat center;background-size:100%;}
        p{font-size:$h3;padding-left:.15rem;color:$gray;line-height: .2rem;margin-top:.05rem;}
      }
    }

    .carSku{
      .page-content{
        li{padding:.15rem 0;border-bottom:$border;}
        li.on{background: url('~assets/img/mall/icon_list_detail_select.png') no-repeat right center;background-size:17px 12px;}
        p{font-size:$h3;color:$gray;line-height: .2rem;margin-top:.05rem;}
        span{color:$red;}
      }
    }
    
    .fourS{background:#f2f2f2;
      h1{background:#fff;}
      .page-content{padding:0;
        h3{font-size:$h3;line-height: .24rem;padding:0 .2rem;}
        p{@include txtOverflow;width:70%;font-size:$h3;color:$gray;line-height: .2rem;}
        span{line-height: .2rem;}
      }
    }
    .goods-detail{padding: 0 .2rem;background: #fff;
      p{color: $black;line-height: .4rem;}
      .difference{font-size: .12rem;padding-bottom:.1rem;
        li{margin-bottom:.06rem;@include box;@include flexAlign;
          &.cur{color:$red}
          .level{display: inline-block;width: .9rem;}
          img{width: .2rem;height: .16rem;margin-right: .35rem;}
        }
      }
    }
    .detail{background: #fff;padding:.06rem;
      h1{text-align: center;line-height: .5rem;}
      img{width:100%;display: block;}}
    .limit-footer{position: absolute;bottom: 0;left: 0;background: $red;z-index: 1;width: 100%;text-align: center;height:.45rem;line-height: .45rem;border-top:1px solid #f2f2f2;color: #fff}
    .btns{height:.45rem;background:#fff;
      button{box-sizing: border-box;height:.45rem;}
        
      .left{width:.5rem;border-top:$border;float:left;position: relative;
        div,img{width:.2rem;height:.2rem;display: block;margin:0 auto;}
        div{background: url('~assets/img/mall/icon_detail_tab_collect.png') no-repeat center;background-size:100%;}
        div.on{background-image: url('~assets/img/mall/icon_detail_tab_collect_pressed.png');}
        span{font-size:$h4;color:$gray;}
        i{position: absolute;top:0rem;right:0;padding:0 .05rem;border-radius: 99px;background: red;color:#fff;line-height:.16rem;font-size:$h4;}
        &:nth-of-type(n+1){border-right:$border;}
      }

      .right{@include box;
          button{@include flex;color:#fff;
            &.yellow{background:#f29600;}
            &.orange{background:$red;}
            &.dis{background:#c9c9c9 !important;line-height: .45rem;color:#fff;text-align:center;}
          }
      }
    }
    .special-title{
      @include box;
      @include flexJustify(space-between);
      .coupon{
        margin-left: .2rem;
        display: inline-block;
        text-align: center;
        min-width: .65rem;
        height: .4rem;
        border: 1px solid #dedede;
        border-radius: .05rem;
        p{font-size: .11rem;line-height:.18rem;height: .17rem;border-bottom: 1px solid #dedede;background: #f2f2f2}
        div{line-height: .22rem;color: $red}
      }
    }
    .special{
      font-size:.12rem;
      margin-top: .08rem;
      .special-price{
        @include box;
        @include flexJustify(space-between);
        @include flexAlign;
        margin-top: .05rem;
        img{width: .37rem;height:.13rem;align-self: center;margin-right: .06rem};
        span{color:$red}
      }
    }
    
    
    .youhuiTag{ border: 1px solid $red;color: $red;padding: .01rem .04rem;border-radius: 3px;font-size: .12rem}
    .choose{color: #c9c9c9}
    
}